      <template>
      	<view class="page-body">
      		<!-- 页面内容开始 -->

      		<!-- 表格搜索组件开始 -->
      		<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
      			@search="search"></vk-data-table-query>
      		<!-- 表格搜索组件结束 -->

      		<!-- 自定义按钮区域开始 -->
      		<view>
      			<el-row>
      				<el-button type="success" size="small" icon="el-icon-circle-plus-outline"
      					@click="addBtn">添加</el-button>
      				<!-- 批量操作 -->
      				<!-- <el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx;"
						:disabled="table1.multipleSelection.length === 0">
						批量操作<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量操作1</el-dropdown-item>
						<el-dropdown-item :command="2">批量操作2</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown> -->
      			</el-row>
      		</view>
      		<!-- 自定义按钮区域结束 -->

      		<!-- 表格组件开始 -->
      		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns"
      			:query-form-param="queryForm1" :right-btns="['detail_auto','update','delete','more']"
      			:right-btns-more="table1.rightBtnsMore" :row-no="true" :pagination="true" @update="updateBtn"
      			@delete="deleteBtn" @current-change="currentChange"
      			@selection-change="selectionChange"></vk-data-table>
      		<!-- 表格组件结束 -->

      		<!-- 添加或编辑的弹窗开始 -->
      		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="700px" mode="form"
      			:close-on-click-modal="false">
      			<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
      				:form-type="form1.props.formType" :columns='form1.props.columns' label-width="130px"
      				@success="form1.props.show = false;refresh();"></vk-data-form>
      		</vk-data-dialog>
      		<!-- 添加或编辑的弹窗结束 -->

      		<!-- 预览充值面板开始页面-->
      		<el-dialog title="预览充值面板页面" :visible.sync="dialogVisible9" width="500px" :before-close="handleClose9"
      			:destroy-on-close="true" :center="true" :close-on-click-modal="false">
      			<view class="boxTemplate">
      				<view v-for="(item, index) in this.preview_recharge_plan" :key="index"
      					style="margin-left: 10rpx; position: relative">
      					<image v-if="item.showFinger" class="floating-image" src="../../../../static/finger.jpg"></image>
      					<!-- @click="createOrder(item,index)" -->
      					<view class="Scheme">
      						<view class="Schemecontentss"
      							v-if="item.subject == '月度会员' || item.subject == '季度会员' || item.subject == '年度会员'">
      							<view class="Judge">
      								{{ item.judge_text?item.judge_text:item.subject }}
      							</view>
      							<view class="RechargeAmount">￥{{ item.recharge_amount / 100 }}</view>
      							<view class="RechargeText">{{ item.recharge_text }}</view>
      						</view>
      						<view class="Schemecontentss" v-else-if="item.subject == '单剧会员'">
      							<view class="Judge">
      								{{ item.judge_text?item.judge_text:"解锁全集" }}
      							</view>
      							<view class="RechargeAmount">￥{{ item.recharge_amount / 100 }}</view>
      							<view class="RechargeText">{{ item.recharge_text }}</view>
      						</view>
      						<view class="Schemecontentss" v-else-if="item.subject == '自定义会员'">
      							<view class="Judge">
      								{{ item.judge_text?item.judge_text:"VIP会员" }}
      							</view>
      							<view class="RechargeAmount">￥{{ item.recharge_amount / 100 }}</view>
      							<view class="RechargeText">{{ item.recharge_text }}</view>
      						</view>
      						<view class="Schemecontent" v-else-if="item.judge == true">
      							<view class="Judge">{{ item.judge_text }}</view>
      							<view class="RechargeAmount">￥{{ item.recharge_amount / 100 }}</view>
      							<view class="GiveBean" v-if="item.give_bean">{{ item.give_bean }}</view>
      							<view class="RechargeText">{{ item.recharge_text }}</view>
      							<view class="PercentageUser">{{ item.percentage_user || 99 }}%的用户选择</view>
      						</view>

      						<view class="Schemecontent" v-else-if="item.judge == false">
      							<view class="Judge">{{ item.subject }}</view>
      							<view class="RechargeAmount">￥{{ item.recharge_amount / 100 }}</view>
      							<view class="GiveBean" v-if="item.give_bean">{{ item.give_bean }}</view>
      							<view class="RechargeText">{{ item.recharge_text }}</view>
      						</view>
      					</view>
      				</view>
      			</view>
      			<span slot="footer" class="dialog-footer">
      				<el-button @click="dialogVisible9 = false">关 闭</el-button>
      			</span>
      		</el-dialog>
      		<!-- 预览充值面板结束页面 -->

      		<!-- 页面内容结束 -->
      	</view>
      </template>

      <script>
      	var that; // 当前页面对象
      	var vk = uni.vk; // vk实例
      	var originalForms = {}; // 表单初始化数据

      	export default {
      		data() {
      			// 页面数据变量
      			return {
      				dialogVisible9: false,
      				// 页面是否请求中或加载中
      				loading: false,
      				// init请求返回的数据
      				data: {

      				},
      				// 表格相关开始 -----------------------------------------------------------
      				table1: {
      					rightBtnsMore: [{
      						title: '预览充值模版',
      						disabled: (item) => {
      							//控制该按钮对哪些数据生效
      							// return item._id == '63c54f03819ce8640cced33f'
      						},
      						onClick: (item) => {
      							this.preview_recharge_plan = item.bind_recharge;
      							this.dialogVisible9 = true;
      						}
      					}],
      					// 表格数据请求地址
      					action: "admin/pages/kh/yhsj/czmb/getList",
      					// 表格字段显示规则
      					columns: [{
      							"key": "subject",
      							"title": "分类",
      							"type": "text",
      							"width": 250,
      						},
      						{
      							key: "",
      							title: "模版所属信息",
      							type: "group",
      							minWidth: 100,
      							align: "left",
      							fixed: "left",
      							columns: [{
      									key: "nickname",
      									title: "代理商昵称",
      									type: "text",
      									defaultValue: ""
      								},
      								{
      									key: "username",
      									title: "代理商用户名",
      									type: "text",
      									defaultValue: ""
      								},
      							],
      						},
      						{
      							key: "",
      							title: "小程序信息",
      							type: "group",
      							minWidth: 180,
      							align: "left",
      							columns: [{
      									key: "appid",
      									title: "appid",
      									type: "text",
      									defaultValue: "未绑定"
      								},
      								{
      									key: "appname",
      									title: "小程序名称",
      									type: "text",
      									defaultValue: "未绑定"
      								},
      							],
      						},
      						{
      							key: "",
      							title: "其他信息",
      							type: "group",
      							minWidth: 180,
      							align: "left",
      							columns: [{
      									"key": "is_open",
      									"title": "是否启用",
      									"type": "switch",
      									"width": 90,
      									"sortable": "custom"
      								},
      								{
      									"key": "_add_time",
      									"title": "添加时间",
      									"type": "time",
      									"width": 180,
      									"sortable": "custom"
      								},
      							],
      						},
      					],
      					// 多选框选中的值
      					multipleSelection: [],
      					// 当前高亮的记录
      					selectItem: ""
      				},
      				// 表格相关结束 -----------------------------------------------------------
      				// 表单相关开始 -----------------------------------------------------------
      				// 查询表单请求数据
      				queryForm1: {
      					// 查询表单数据源，可在此设置默认值
      					formData: {

      					},
      					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
      					columns: [{
      						"key": "appid",
      						"title": "appid",
      						"type": "text",
      						"width": 160,
      					}, {
      						"key": "subject",
      						"title": "分类",
      						"type": "text",
      						"width": 200,
      						"mode": "="
      					}, ]
      				},
      				form1: {
      					// 表单请求数据，此处可以设置默认值
      					data: {

      					},
      					// 表单属性
      					props: {
      						// 表单请求地址
      						action: "",
      						// 表单字段显示规则
      						columns: [{
      								"key": "subject",
      								"title": "分类",
      								"type": "text",
      							},
      							{
      								key: "appname",
      								title: "绑定小程序",
      								type: "table-select",
      								placeholder: "选择",
      								action: "admin/pages/kh/xcxpz/xcxgl/getList",
      								columns: [
      									// {
      									// 	key: "_id",
      									// 	title: "_id",
      									// 	type: "text",
      									// },
      									{
      										key: "appid",
      										title: "小程序appid",
      										type: "text",
      										nameKey: true
      									},
      									{
      										key: "appname",
      										title: "小程序名称",
      										type: "text",
      										idKey: true
      									},
      								],
      								// multiple: true,
      								watch: (res) => {
      									console.log("watch", res.option)
      									this.form1.data.appid = res.option.appid
      								}
      							},
      							{
      								key: "bind_recharge_id",
      								title: "绑定充值方案",
      								type: "table-select",
      								placeholder: "选择",
      								action: "admin/pages/kh/xcxpz/chfagl/getList",
      								columns: [{
      										key: "recharge_beizhu",
      										title: "备注",
      										type: "text",
      									}, {
      										key: "subject",
      										title: "充值类型",
      										type: "text",
      									},
      									{
      										key: "recharge_amount",
      										title: "充值金额",
      										type: "text"
      									},
      									{
      										key: "bean",
      										title: "金豆数",
      										type: "text"
      									},
      									{
      										key: "recharge_text",
      										title: "充值说明",
      										type: "text",
      										nameKey: true
      									},
      									{
      										key: "appname",
      										title: "小程序名称",
      										type: "text",
      									},
      									{
      										key: "_id",
      										title: "id",
      										type: "text",
      										width: 1,
      										idKey: true,
      									},
      								],
      								multiple: true,
      								multipleLimit: 6,
      								dialogWidth: 1400,
      								pageSize: 10,
      								watch: (res) => {
      									this.form1.data.bind_recharge = res.option
      								}
      							},
      							{
      								"key": "is_open",
      								"title": "是否启用",
      								"type": "switch",
      								defaultvalue: false
      							},

      						],
      						// 表单验证规则
      						rules: {

      						},
      						// add 代表添加 update 代表修改
      						formType: "",
      						// 是否显示表单的弹窗
      						show: false
      					}
      				},
      				// 其他弹窗表单
      				formDatas: {},
      				// 表单相关结束 -----------------------------------------------------------
      			};
      		},
      		// 监听 - 页面每次【加载时】执行(如：前进)
      		onLoad(options = {}) {
      			that = this;
      			vk = that.vk;
      			that.options = options;
      			that.init(options);
      		},
      		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
      		onReady() {},
      		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
      		onShow() {},
      		// 监听 - 页面每次【隐藏时】执行(如：返回)
      		onHide() {},
      		// 函数
      		methods: {
      			handleClose9() {
      				this.dialogVisible9 = false;
      			},
      			// 页面数据初始化函数
      			init(options) {
      				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
      			},
      			// 页面跳转
      			pageTo(path) {
      				vk.navigateTo(path);
      			},
      			// 表单重置
      			resetForm() {
      				vk.pubfn.resetForm(originalForms, that);
      			},
      			// 搜索
      			search() {
      				that.$refs.table1.search();
      			},
      			// 刷新
      			refresh() {
      				that.$refs.table1.refresh();
      			},
      			// 获取当前选中的行的数据
      			getCurrentRow() {
      				return that.$refs.table1.getCurrentRow();
      			},
      			// 监听 - 行的选中高亮事件
      			currentChange(val) {
      				that.table1.selectItem = val;
      			},
      			// 当选择项发生变化时会触发该事件
      			selectionChange(list) {
      				that.table1.multipleSelection = list;
      			},
      			// 显示添加页面
      			addBtn() {
      				that.resetForm();
      				that.form1.props.action = 'admin/pages/kh/yhsj/czmb/add';
      				that.form1.props.formType = 'add';
      				that.form1.props.title = '添加';
      				that.form1.props.show = true;
      			},
      			// 显示修改页面
      			updateBtn({
      				item
      			}) {
      				that.form1.props.action = 'admin/pages/kh/yhsj/czmb/update';
      				that.form1.props.formType = 'update';
      				that.form1.props.title = '编辑';
      				that.form1.props.show = true;
      				that.form1.data = item;
      			},
      			// 删除按钮
      			deleteBtn({
      				item,
      				deleteFn
      			}) {
      				deleteFn({
      					action: "admin/pages/kh/yhsj/czmb/delete",
      					data: {
      						_id: item._id
      					},
      				});
      			},
      			// 监听 - 批量操作的按钮点击事件
      			batchBtn(index) {
      				switch (index) {
      					case 1:
      						vk.toast("批量操作按钮1");
      						break;
      					case 2:
      						vk.toast("批量操作按钮2");
      						break;
      					default:
      						break;
      				}
      			}
      		},
      		// 监听属性
      		watch: {

      		},
      		// 过滤器
      		filters: {

      		},
      		// 计算属性
      		computed: {

      		}
      	};
      </script>
      <style lang="scss" scoped>
      	.page-body {}

      	.floating-image {
      		position: absolute;
      		right: -45rpx;
      		bottom: -70rpx;
      		width: 230rpx;
      		/* 这里的宽高可以决定手指的大小 */
      		height: 230rpx;
      		/* 这里的宽高可以决定手指的大小 */
      		z-index: 99999;
      	}

      	.boxTemplate {
      		width: 730rpx;
      		margin: 0 auto;
      		display: flex;
      		flex-wrap: wrap;

      		.Scheme {
      			width: 350rpx;
      			height: 180rpx;
      			margin: 20rpx 0;

      			.Schemecontent {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url('@/static/tehui.png');
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-image: url('@/static/tehuis.png');
      					background-size: 100% 100%;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.GiveBean {
      					padding: 0 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 40%;
      					top: 29%;
      				}

      				.RechargeText {
      					font-size: 26rpx;
      					font-weight: 600;
      					left: 8%;
      					width: 91%;
      					top: 50%;
      				}

      				.PercentageUser {
      					color: #e37f75;
      					font-size: 24rpx;
      					font-weight: 600;
      					right: 20rpx;
      					bottom: 10rpx;
      				}
      			}

      			.Schemecontents {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				background-color: #ffead8;
      				position: relative;

      				view {
      					position: absolute;
      				}

      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 3%;
      					top: 20%;
      				}

      				.GiveBean {
      					padding: 0rpx 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 38%;
      					top: 24%;
      				}

      				.RechargeText {
      					font-size: 24rpx;
      					font-weight: 600;
      					left: 5%;
      					bottom: 20%;
      				}
      			}

      			.Schemecontentss {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 14rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url('@/static/huiyuan.png');
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-color: #fafc43;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					color: #ffffff;
      					font-weight: 600;
      					font-size: 32rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.RechargeText {
      					color: #f2e4d8;
      					font-size: 26rpx;
      					font-weight: 500;
      					left: 5%;
      					width: 91%;
      					top: 52%;
      				}
      			}
      		}
      	}
      </style>